<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout Layui</title>
    <link rel="stylesheet" href="/ui2/src/css/layui.css">
    <script src="/ui2/src/layui.js"></script>
    <script src="DataTableExtend.js"></script>
</head>
<body class="layui-layout-body">
<table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
<script>
    layui.use(['element', 'layer', 'form', 'upload', 'treeGrid'], function () {
    	var $ = layui.jquery;
        var treeGrid = layui.treeGrid; //很重要
        var treeTable =treeGrid.render({
            elem: '#treeTable'
            ,url:'data22.json'
            ,cellMinWidth: 100
           , height: 3150
            , response: {
            	statusName: 'status' 
          	  ,statusCode: 200 //成功的状态码，默认：0
         
          	}
            ,treeId:'id'//树形id字段名称
            ,treeUpId:'parent_id'//树形父id字段名称
            ,treeShowName:'name'//以树形式显示的字段
            ,cols: [[
            	//{checkbox: true},
                {field:'name', edit:'text',width:'400', title: '水果'}
                ,{field:'name2', edit:'text',width:'400', title: '名字2'}
            ]]
            ,page:false
            , done: function (res, curr, count) {// 表格渲染完成之后的回调
            	  $(".layui-table th").css("font-weight", "bold");// 设定表格标题字体加粗

                  LayUIDataTable.SetJqueryObj($);// 第一步：设置jQuery对象
                  
                  var currentRowDataList = LayUIDataTable.ParseDataTable(function (index, currentData, rowData) {
                      //console.log("当前页数据条数:" + currentRowDataList.length)
                      console.log("当前行索引：" + index);
                      //console.log("触发的当前行单元格：" + currentData);
                     // console.log("当前行数据：" + JSON.stringify(rowData));

                      $.each(currentRowDataList, function (i, obj) {//当前设置颜色，其他的取消
                    	 // console.log(obj);
                     	 if(i == index)
                     		 obj['name2']["row"].css("background-color", "#ffe48d");
                     	 
                     	 else{
                     		 obj['name2']["row"].css("background-color", "");
                     	 }
                     });
                  })

                  // 对相关数据进行判断处理--此处对【竞猜数量】大于30的进行高亮显示
                  $.each(currentRowDataList, function (index, obj) {
                       /*
                          * 通过遍历表格集合，拿到每行数据对象obj，通过obj["列名"]["row"]可以拿到行对象，obj["列名"]["cell"]可以拿到单元格对象
                          * */
                      //if (obj['num'] && obj['num'].value > 1) {
                         // obj['num']["row"].css("background-color", "#FAB000");// 对行（row）进行高亮显示
                          //obj["num"]["cell"].css("font-weight","bold");// 对单元格（cell）字体进行加粗显示
                      //}
                  })
            }
        });
    });
</script>
</body>
</html>